<template>
  <div class="login-box">
    <div class="login">
      <section class="login-enroll">
        <div class="login-link"></div>
        <h2 class="login-register">{{loginTile}}</h2>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- phone -->
          <el-tab-pane label="PHONE" name="phone">
            <div class="input-Phone">
              <el-select v-model="phoneForm.area" placeholder="+86">
                <el-option v-for="item in areaCode" :label="'+'+ item.key" :value="item.key" :key="item.key"></el-option>
              </el-select>
              <input
                type="text"
                v-model="phoneForm.phone"
                class="input-box"
                placeholder="Phone Number"
              />
            </div>
            <input
              type="password"
              class="input-box"
              v-model="phoneForm.password"
              :class="{ 'email-bp': isLogin }"
              placeholder="Password"
            />
            <input
              v-show="buttonTitle=='REGISTER'"
              type="password"
              v-model="phoneForm.confirm_password"
              class="input-box"
              placeholder="Confrim Password"
            />
            <div v-show="buttonTitle=='REGISTER'" class="login-clause">
              <el-checkbox v-model="phoneForm.checked"></el-checkbox>
              <span>I argee to Anteque's</span>
              <span class="clause-terms">Terms of use</span>
            </div>
            <el-button
              class="submit-bottom"
              :class="{ 'email-bp': isLogin }"
              @click="loginRegClick"
            >{{buttonTitle}}</el-button>
            <div v-show="buttonTitle=='LOGIN'" class="login-forgot">
              <p @click="forpotPas">Forpot Password ?</p>
            </div>
            <div class="login-tips">
              <p class="tips-alresa">{{tipsAlresa}}</p>
              <p class="tips-login" @click="tipsLoginClick">{{loginRegister}}</p>
            </div>
          </el-tab-pane>
          <!-- email -->
          <el-tab-pane label="EMAIL" name="email">
            <input v-model="emailForm.email" type="text" class="input-box" placeholder="email" />
            <input
              v-model="emailForm.password"
              type="password"
              class="input-box"
              :class="{ 'email-bp': isLogin }"
              placeholder="Password"
            />
            <input
              v-model="emailForm.confirm_password"
              v-show="buttonTitle=='REGISTER'"
              type="password"
              class="input-box"
              placeholder="Confrim Password"
            />
            <div v-show="buttonTitle=='REGISTER'" class="login-clause">
              <el-checkbox v-model="emailForm.checked"></el-checkbox>
              <span>I argee to Anteque's</span>
              <span class="clause-terms">Terms of use</span>
            </div>
            <el-button
              class="submit-bottom"
              :class="{ 'email-bp': isLogin }"
              @click="loginRegClick"
            >{{buttonTitle}}</el-button>
            <div v-show="buttonTitle=='LOGIN'" class="login-forgot">
              <p @click="forpotPas">Forpot Password ?</p>
            </div>
            <div class="login-tips">
              <p class="tips-alresa">{{tipsAlresa}}</p>
              <p class="tips-login" @click="tipsLoginClick">{{loginRegister}}</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>
    <el-dialog
      :title="codeTitle"
      :visible.sync="registerDialogVisible"
      :lock-scroll="false"
      width="450PX"
      center
    >
      <section class="sms-content">
        <div class="sms-tips">
          <h2>Enter the {{codeType}} code that you received in</h2>
          <p>{{smsPhoneEmail}}</p>
          <span>received</span>
        </div>
        <div class="sms-code">
          <span>{{codeType}} Code</span>
          <div class="code-wrapper">
            <input type="tel" class="code-box" maxlength="6" @keyup="inputNumber" />
            <ul>
              <li v-for="(i,index) in 6" :key="index">{{numList[index]}}</li>
            </ul>
          </div>
        </div>
        <el-button class="submit-bottom" @click="userloginClick(codeType)">CONFIRM</el-button>
        <div class="count-down">
          <span>Resend in</span>
          <span class="count-time">{{countTime}}</span>
          <span>s</span>
        </div>
      </section>
    </el-dialog>
    <el-dialog
      title="FORGOT PASSWORD"
      :visible.sync="forgotDialogVisible"
      :lock-scroll="false"
      width="480PX"
      center
    >
      <section class="sms-content" v-if="forgotCheckShows">
        <div class="sms-tips">
          <h2>Enter the {{codeType}} code that you received on your</h2>
          <p>{{smsPhoneEmail}}</p>
          <h3>and set up new password</h3>
        </div>
        <div class="sms-code">
          <span>{{codeType}} Code</span>
          <div class="code-wrapper">
            <input type="tel" class="code-box" maxlength="6" @keyup="inputNumber" />
            <ul>
              <li v-for="(i,index) in 6" :key="index">{{numList[index]}}</li>
            </ul>
          </div>
        </div>
        <input
          type="password"
          class="input-box"
          v-model="forgotForm.new_password"
          placeholder="New Password"
          />
        <input
          type="password"
          v-model="forgotForm.confirm_new_password"
          class="input-box"
          placeholder="Confirm Password"
          />
        <el-button class="submit-bottom" @click="forgotClick">CONFIRM</el-button>
        <div class="count-down">
          <span>Resend in</span>
          <span class="count-time">{{countTime}}</span>
          <span>s</span>
        </div>
      </section>
      <section class="success-check" v-else>
        <i class="el-icon-success"></i>
        <h1>SUCCESS</h1>
        <h2>Your new password has been changed !</h2>
        <el-button class="submit-bottom" @click="forgotDialogVisible = false">GO TO LOGIN</el-button>
      </section>
    </el-dialog>
    <footers />
  </div>
</template>
<script>
import { mapActions } from "vuex";
import footers from "@/components/footer";
import { areaCode } from "@/assets/js/country";
import { hideMobileInfo, hideEmailInfo } from "@/filter/index";
import { userRegister, verCode, forgetPassword, emailCode } from "@/api/userLogin"
export default {
  data() {
    return {
      areaCode: areaCode,
      activeName: "phone",
      phoneForm: {
        phone: "",
        area: "86",
        checked: true,
        password: '',
        confirm_password: ''
      },
      emailForm: {
        email: "",
        checked: true,
        password: "",
        confirm_password: ""
      },
      forgotForm: {
        new_password: '',
        confirm_new_password: ''
      },
      codeTitle: "",
      codeType: "",
      smsPhoneEmail: "",
      numList: [],
      isLogin: true,
      timer: null,
      countTime: "",
      buttonTitle: "LOGIN",
      loginTile: "USER LOGIN",
      loginRegister: "Register",
      forgotCheckShows: true,
      forgotDialogVisible: false,
      registerDialogVisible: false,
      tipsAlresa: "Dot't have an account ?"
    };
  },
  computed: {},
  components: {
    footers
  },
  mounted() {},
  methods: {
    ...mapActions(["orLogin", "login"]),
    /**
     * @Author   LLP
     * @DateTime 2019-12-11T17:00:55+0800
     * 切换登入状态
     * ----------------------------------
     * @return   {[type]}
     */
    handleClick() {
      this.isLogin = true;
      this.buttonTitle = "LOGIN";
      this.loginRegister = "Register";
      this.loginTile = "USER LOGIN";
      this.tipsAlresa = "Dot't have an account ?";
    },
    /**
     * @Author   LLP
     * @DateTime 2019-12-11T17:01:51+0800
     * 切换登入或注册
     * ----------------------------------
     * @return   {[type]}
     */
    tipsLoginClick() {
      if (this.buttonTitle == "LOGIN") {
        this.isLogin = false;
        this.loginTile = "REGISTER";
        this.buttonTitle = "REGISTER";
        this.loginRegister = "Login";
        this.tipsAlresa = "Already Registed ?";
      } else {
        this.isLogin = true;
        this.buttonTitle = "LOGIN";
        this.loginRegister = "Register";
        this.loginTile = "USER LOGIN";
        this.tipsAlresa = "Dot't have an account ?";
      }
    },
    /**
     * @Author   LLP
     * @DateTime 2019-12-11T17:02:39+0800
     * 获取邮箱或手机验证码
     * ----------------------------------
     * @return   {[type]}
     */
    loginRegClick() {
      if (this.activeName === 'phone') {
        if (this.buttonTitle == "REGISTER") {
          this.gecountTime();
          this.codeType = "SMS";
          this.codeTitle = "SMS VERIFICATION";
          this.smsPhoneEmail = hideMobileInfo(this.phoneForm.phone);
          if(this.proofTest(this.phoneForm)) {
            this.verCode('01')
            this.registerDialogVisible = true
          };
        } else {
          let param = {
            phone: this.phoneForm.area + this.phoneForm.phone,
            password: this.phoneForm.password,
            email: ''
          }
          this.userLogin(param)
        }
      } else {
        if (this.buttonTitle == "REGISTER") {
          this.gecountTime();
          this.codeType = "EMAIL";
          this.codeTitle = "EMAIL VERIFICATION";
          this.smsPhoneEmail = hideEmailInfo(this.emailForm.email);
          if(this.proofTest(this.emailForm)){
            this.emailCode('01')
            this.registerDialogVisible = true
          };
        } else {
          let param = {
            phone: '',
            password: this.emailForm.password,
            email: this.emailForm.email
          }
          this.userLogin(param)
        }
      }
    },
    /**
     * [forpotPas description]
     * 设置密码
     * ----------------------------------
     * @Author   LLP
     * @DateTime 2019-12-12T15:51:44+0800
     * @return   {[type]}                 [description]
     */
    forpotPas() {
      if (this.activeName === 'phone') {
        this.codeType = "SMS";
        this.smsPhoneEmail = hideMobileInfo(this.phoneForm.phone);
        this.forpoTest(this.phoneForm.phone === "" ? 'Mobile' : '')
        if(this.phoneForm.phone) this.verCode('02')
      } else {
        this.codeType = "EMAIL";
        this.smsPhoneEmail = hideEmailInfo(this.emailForm.email);
        this.forpoTest(this.emailForm.email === "" ? 'Email' : '')
        if(this.emailForm.email) this.emailCode('02')
      }
      this.gecountTime();
    },
    /**
     * @name: 修改密码
     * -----------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    forgotClick() {
      let forgot = this.forgotForm
      if (forgot.new_password.length < 8 || forgot.confirm_new_password.length < 8 ) {
        this.$message({
          message: 'Password length cannot be less than eight digits.',
          type: 'warning'
        })
      } else if (forgot.new_password != forgot.confirm_new_password) {
        this.$message({
          message: 'Two password entries are inconsistent !!!',
          type: 'warning'
        })
      } else {
        let param = {}
        if (this.activeName === 'phone') {
          param = {
            email: '',
            code: this.numList.join(''),
            phone: this.phoneForm.area + this.phoneForm.phone,
            ...this.forgotForm
          }
        } else {
          param = {
            email: this.emailForm.email,
            code: this.numList.join(''),
            phone: '',
            ...this.forgotForm
          }
        }
        this.forgetPassword(param)
      }
    },
    userloginClick(type) {
      let param = {}
      let resParam = {}
      if (type === 'SMS') {
        param = {
          phone: this.phoneForm.area + this.phoneForm.phone,
          password: this.phoneForm.password,
          confirm_password: this.phoneForm.confirm_password,
          sms_code: this.numList.join(''),
          email: ''
        }
        resParam = {
          phone: this.phoneForm.area + this.phoneForm.phone,
          password: this.phoneForm.password,
          email: ''
        }
      } else {
        param = {
          email: this.emailForm.email,
          password: this.emailForm.password,
          confirm_password: this.emailForm.confirm_password,
          sms_code: this.numList.join(''),
          phone: ''
        }
        resParam = {
          phone: '',
          password: this.emailForm.password,
          email: this.emailForm.email
        }
      }
      this.userRegister(param, resParam)
    },
    /**
     * [verCode description]
     * 获取短信验证码-phone
     * ----------------------------------
     * @Author   LLP
     * @DateTime 2019-12-12T11:12:30+0800
     * @param    {[type]}                 type [description]
     * @return   {[type]}                      [description]
     */
    async verCode(type) {
      let param = {
        type: type,
        phone: this.phoneForm.area + this.phoneForm.phone,
      }
      let {data} = await verCode(param)
      if (data === null) {
        this.$message({
          message: 'The verification code has been sent, please check.',
          type: 'success'
        });
      }
    },
    /**
     * @name: 获取短信验证码-email
     * --------------------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    async emailCode(type) {
      let param = {
        type: type,
        email: this.emailForm.email
      }
      let {data} = await emailCode(param)
      if (data === null) {
        this.$message({
          message: 'The verification code has been sent, please check.',
          type: 'success'
        });
      }
    },
    /**
     * [userLogin description]
     * 用户登录
     * ----------------------------------
     * @Author   LLP
     * @DateTime 2019-12-12T15:58:17+0800
     * @param    {[type]}                 param [description]
     * @return   {[type]}                       [description]
     */
    userLogin(param) {
      this.$store.dispatch('userLogin', param).then(() => {
        this.orLogin(true)
        this.$router.push({ path: '/' })
      }).catch((error) => {
         console.log(error)
      })
    },
    /**
     * [userRegister description]
     * 用户注册
     * ---------------------------------
     * @Author   LLP
     * @DateTime 2019-12-12T11:56:25+0800
     * @param    {[type]}                 param [description]
     * @return   {[type]}                       [description]
     */
    async userRegister(param, resParam) {
      let {data} = await userRegister(param)
      if (data === null) {
        this.$store.dispatch('userLogin', resParam).then(() => {
          this.orLogin(true)
          this.$router.push({ path: '/' })
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    /**
     * @name: 修改密码
     * -----------------  
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    async forgetPassword(param) {
      let {data} = await forgetPassword(param)
      if (data === null) {
        this.$message({
          showClose: true,
          message: 'Password modified successfully.',
          type: 'success'
        });
        this.forgotCheckShows = false
      }
    },
    /**
     * @Author   LLP
     * @DateTime 2019-12-11T17:52:14+0800
     * 校验
     * ---------------------------------
     * @param    {[type]}
     * @return   {[type]}
     */
    proofTest(ver) {
      let estimate = null
      if (this.activeName === 'phone' && ver.phone === '') {
        this.$message({
          message: 'Mobile number cannot be empty !!!',
          type: 'warning'
        })
        return estimate = false
      } else if (this.activeName === 'email' && ver.email === ''){
        this.$message({
          message: 'Email number cannot be empty !!!',
          type: 'warning'
        })
        return estimate = false
      } else if (ver.possword === '') {
        this.$message({
          message: 'Password cannot be empty !!!',
          type: 'warning'
        })
        return estimate = false
      } else if (ver.password.length < 8 || ver.confirm_password.length < 8) {
        this.$message({
          message: 'Password length cannot be less than eight digits.',
          type: 'warning'
        })
      } else if (ver.password != ver.confirm_password) {
        this.$message({
          message: 'Two password entries are inconsistent !!!',
          type: 'warning'
        })
        return estimate = false
      } else {
        return estimate = true
      }
    },
    /**
     * @name: 修改密码验证
     * -------------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    forpoTest(params) {
      if (params) {
        return this.$message({
          message: `${params} number cannot be empty !!!`,
          type: 'warning'
        })
      } else {
        this.forgotDialogVisible = true
      }
    },
    /**
     * @Author   LLP
     * @DateTime 2019-12-11T17:03:22+0800
     * 验证码输入框
     * ----------------------------------
     * @param    {[type]}
     * @return   {[type]}
     */
    inputNumber(res) {
      if (this.numList.length < 6 && res.key !== "Backspace") {
        this.numList.push(res.key);
      }
      if (res.key === "Backspace") {
        this.numList.pop();
      }
    },
    /**
     * @Author   LLP
     * @DateTime 2019-12-11T17:03:51+0800
     * 倒计时
     * ----------------------------------
     * @return   {[type]}
     */
    gecountTime() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.countTime = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.countTime > 0 && this.countTime <= TIME_COUNT) {
            this.countTime--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>
<style scoped lang="less">
.login-box {
  height: auto;
  width: 100%;
  background: url("../../assets/img/loginbg.png") no-repeat fixed top;
  background-size: cover;
  overflow: hidden;
  position: absolute;
  padding: 60px;
  .login {
    width: 100%;
    margin: 165px 0 50px 0;
    .login-enroll {
      width: 443px;
      height: 545px;
      background: #fff;
      border-radius: 20px;
      margin: 0px auto;
      position: relative;
      padding: 80px 45px 0;
      box-sizing: border-box;
      .login-link {
        position: absolute;
        left: 50%;
        top: -62.5px;
        width: 125px;
        height: 125px;
        border-radius: 50%;
        margin-left: -62.5px;
        background: #fff;
        border: 5px solid #ffaf46;
      }
      .login-register {
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        color: #7f7f88;
      }
      .input-box {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        background: #f1f1f1;
        border: 0;
        margin-top: 20px;
        padding-left: 10px;
        font-size: 16px;
      }
      .input-Phone {
        width: 100%;
        display: inline-block;
        .el-select {
          width: 80px;
          margin-right: 23px;
          display: inline-block;
        }
        .input-box {
          width: 250px;
          display: inline-block;
        }
      }
      .login-clause {
        padding-top: 20px;
        span {
          font-size: 12px;
          padding-left: 5px;
          font-weight: 600;
          display: inline-block;
        }
        .clause-terms {
          color: #ffaf46;
          cursor: pointer;
        }
      }
      .login-forgot {
        color: #ffaf46;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        padding-top: 20px;
        cursor: pointer;
      }
      .submit-bottom {
        width: 100%;
        background: #ffaf46;
        color: #fff;
        margin-top: 25px;
      }
      .email-bp {
        margin-top: 45px;
      }
      .login-tips {
        display: flex;
        padding-top: 10px;
        justify-content: space-between;
        p {
          font-size: 16px;
          height: 50px;
          line-height: 50px;
        }
        .tips-alresa {
          color: #7f7e80;
        }
        .tips-login {
          color: #ffaf46;
          text-align: right;
          cursor: pointer;
        }
      }
    }
  }
  .sms-content {
    padding: 20px 30px;
    .sms-tips {
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      padding-bottom: 20px;
      p {
        color: #ffaf46;
        padding-top: 5px;
        padding-right: 5px;
        display: inline-block;
      }
      h3 {
        display: inline-block;
      }
    }
    .input-box {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-radius: 6px;
      background: #f1f1f1;
      border: 0;
      margin-top: 20px;
      padding-left: 10px;
      font-size: 16px;
    }
    .sms-code {
      margin-top: 20px;
      margin-bottom: 20px;
      .code-wrapper {
        display: flex;
        align-items: center;
        margin-top: 10px;
        justify-content: center;
        position: relative;
        .code-box {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          color: transparent;
          opacity: 0;
        }
        ul {
          flex: 1;
          display: flex;
          height: 50px;
          background-color: #fff;
          li {
            flex: 1;
            display: flex;
            align-items: center;
            margin-right: 5px;
            font-size: 24px;
            color: #000;
            border-bottom: 2px solid #ffaf46;
            justify-content: center;
            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }
    .submit-bottom {
      width: 100%;
      background: #ffaf46;
      color: #fff;
      margin-top: 25px;
    }
    .count-down {
      font-size: 16px;
      text-align: center;
      margin-top: 20px;
      .count-time {
        color: #ffaf46;
        padding: 0 5px;
      }
    }
  }
  .success-check {
    text-align: center;
    i {
      color: rgb(35, 147, 211);
      font-size: 80px;
    }
    h1 {
      font-size: 22px;
      line-height: 50px;
      padding-top: 20px;
    }
    h2 {
      font-size: 16px;
    }
    .submit-bottom {
      width: 100%;
      background: #ffaf46;
      color: #fff;
      margin-top: 25px;
    }
  }
}
</style>
<style lang="less">
.login-box {
  .el-tabs {
    .el-tabs__nav-wrap::after {
      height: 0 !important;
    }
    .el-input__inner {
      background: #f1f1f1;
    }
  }
  .el-dialog {
    .el-dialog__header {
      height: 85px;
      line-height: 70px;
      border-bottom: 2px solid #ffaf46;
    }
  }
}
</style>